<template>
    <div class="heat">
        <ModalTitle title="热力图" />
        <div class="heat-map" id="heat-map"></div>
    </div>
</template>

<script>
import ModalTitle from '@/components/ModalTitle/Index.vue'
import { ZongHeZhiFaDB } from '@/api/zhangzi'

let HEATMAP = null;
let HEATDATA = null;
export default {
    components: {
        ModalTitle
    },

    data() {
        return {

        }
    },

    mounted() {
        this.mapInit()
    },

    methods: {
        mapInit() {
            HEATMAP = new AMap.Map("heat-map", {
                pitch: 30,
                zoom: 11,
                rotation: 0,
                center: ['112.87795', '36.12222'],
                zooms: [2, 20],
            });
            this.heatMapFn()
        },

        heatMapFn() {
            ZongHeZhiFaDB.getOrderThermodynamic().then(res => {
                let HEATMAP1;
                if (res.code == 200) {
                    HEATMAP.plugin(["AMap.HeatMap"], function () {
                        //初始化heatmap对象
                        HEATMAP1 = new AMap.HeatMap(HEATMAP, {
                            radius: 25, //给定半径
                            opacity: [0, 0.8],
                            gradient: {
                                0.5: 'blue',
                                0.65: 'rgb(117,211,248)',
                                0.7: 'rgb(0, 255, 0)',
                                0.9: '#ffea00',
                                1.0: 'red'
                            }
                        });
                        HEATMAP1.setDataSet({
                            data: res.data,
                            max: 100
                        });
                    });
                    HEATMAP.setFitView()
                }
            })
        }
    }
}
</script>

<style lang="less" scoped>
.heat {
   
    margin-top: 1.6rem;
    .heat-map {
        width: 100%;
        height: 22.1rem;
    }
}
</style>